<template>
  <view class="spirit theme-2d" v-if="STATE.guessHero.sunShine">
    <view class="surplus">
      <text class="surplusLabel">阳光值</text>
      <image :src="IMAGES.ICON_MONEY_SUN" mode="widthFix"></image>
      {{ STATE.guessHero.sunShine.restPoint }}/{{ STATE.guessHero.sunShine.max }}
    </view>
    <view class="tip" v-if="STATE.guessHero.sunShine.max === STATE.guessHero.sunShine.restPoint">阳光值已满</view>
    <view class="tip" v-if="STATE.guessHero.sunShine.max < STATE.guessHero.sunShine.restPoint">MAX + N</view>
    <view class="tip" v-else-if="STATE.guessHero.sunShine">{{ STATE.guessHero.sunShine.fullPointTime | formatDate }}</view>
    <view class="btn flex align-center justify-center" @tap="toggleModal(true)" v-if="STATE.guessHero.sunShine.apPrice">
      一键补满 x{{ STATE.guessHero.sunShine.apPrice }}
      <image :src="IMAGES.ICON_MONEY_FLOWER" mode="widthFix"></image>
    </view>
    <modal title="一键补满阳光值" hdClasses="bg-blue" :show.sync="showModal">
      <view class="intro">
        <view class="intro-text">本次补满阳光值需消耗</view>
        <image :src="IMAGES.ICON_MONEY_FLOWER" mode="widthFix"></image>
        <view class="intro-text">X{{ STATE.guessHero.sunShine.apPrice }}</view>
      </view>
      <view class="btn2"><button class="cu-btn line-blue radius" @tap="onClickAp2Flower">确 定</button></view>
      <view class="white-strip">
        <label @click="onChangeUseWhiteStrip">
          <checkbox :class="isUseWhiteStrip ? 'checked' : ''" :checked="isUseWhiteStrip" />
          <view class="text">
            <text>鲜花不足时，是否使用</text>
            <navigator url="/pages/credit/index">拿去花</navigator>
          </view>
        </label>
      </view>
    </modal>
  </view>
</template>

<script>
import { IMAGES } from "@/config/resources";
import modal from "@/components/modal/index";
import uniApp from "@/utils/uni-app";
export default {
  components: {
    modal
  },
  computed: {
    IMAGES: () => IMAGES
  },
  data() {
    return {
      showModal: false,
      isUseWhiteStrip: true
    };
  },
  mounted() {
    uni.$on("game_timeing", data => {
      this.$store.dispatch("guessHero/getSunShine");
    });
  },
  methods: {
    toggleModal(bool) {
      this.showModal = bool;
    },
    // 是否使用白条
    onChangeUseWhiteStrip() {
      this.isUseWhiteStrip = !this.isUseWhiteStrip;
    },
    onClickAp2Flower() {
      this.$api.guessHero
        .postAp2Flower({
          useDebt: this.isUseWhiteStrip ? 1 : 0
        })
        .then(_ => {
          console.warn({ _ });
          this.$store.commit("guessHero/SET_SUN_SHINE", _.data.data);
          uniApp.toast("已补满");
          this.toggleModal(false);
        })
        .catch(e => {
          console.warn({ e });
          uniApp.alert(e.message || e.data.msg || "操作失败");
        });
    }
  },
  filters: {
    formatDate(str) {
      if (!str) return "MAX";
      let t = parseInt(str);
      let now = new Date().getTime() / 1000;
      if (t - now > 0) {
        if (t - now > 60) {
          return "约" + parseInt((t - now) / 60) + "分钟后恢复满";
        }
      } else {
        return "MAX";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.spirit {
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 24upx;
  padding: 0 0 0 20rpx;
  height: 60upx;
  > view {
    flex: 1;
    text-align: center;
  }
  .surplus {
    height: 100%;
    line-height: 60upx;
    font-size: 30upx;
    text-align: center;
    display: flex;
    align-items: center;
    image {
      width: 60upx;
      height: 60upx;
      transform: scale(0.7);
    }
  }
  .surplusLabel{
    font-size: 24rpx;
  }
  .tip {
    height: 100%;
    line-height: 60upx;
  }
  > .btn {
    height: 100%;
    padding: 10upx 0;
    image {
      width: 60upx;
      height: 60upx;
    }
    &:active {
      transform: scale(1.1);
    }
  }
  .btn2 {
    width: 100%;
    text-align: center;
  }
  .intro {
    display: flex;
    align-items: center;
    justify-content: center;
    > image {
      width: 60upx;
      height: 60upx;
    }
  }
  .cu-btn {
    height: 50upx;
    margin: 30upx auto;
  }
  .white-strip {
    font-size: 24upx;
    label {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    checkbox {
      transform: scale(0.5);
    }
    .text {
      color: #666666;
      display: flex;
      align-items: center;
      navigator {
        color: #007aff;
        text-decoration: underline;
      }
    }
  }

  // 主题定制
  &.theme-2d {
    @include navBg();
    .surplus,
    .tip,
    > .btn {
      color: #ffffff;
    }
    > .btn {
      background-color: #fb7299;
    }
  }
}
</style>
